<template>
	<div class="matrix">
		<p v-for="(p,k1) in matrix2" :key="k1">
			<b v-for="(e,k2) in p" :key="k2" :class="{c:e===1,d:e===2,h:e===3}"></b>
		</p>
	</div>
</template>

<script>
	let log = function() {
		// console.log("Matrix:", ...arguments)
	}

	import {
		mapState
	} from 'vuex';
	import index from '../unit/index.js';
	import constObj from '../unit/const.js';
	import states from '../control/states.js';
	let {
		isClear
	} = index;
	let {
		fillLine,
		blankLine
	} = constObj;

	const t = setTimeout;

	export default {
		name: 'Matrix',
		props: {
			cur: {
				type: Object
			},
		},
		data() {
			return {
				clearLines: false,
				animateColor: 2,
				overState: null,
				matrix2: [],
			};
		},
		created() {
			this.matrix2 = this.cloneMatrix(this.matrix);
		},
		computed: {
			...mapState({
				matrix: (state) => {
					return state.matrix;
				},
				reset: (state) => {
					log("reset", state.reset)
					return state.reset;
				},
				help: (state) => {
					return state.help;
				}
				// cur: (state) => {
				// 	return state.cur;
				// },
			})
		},
		watch: {
			reset(newVal, oldVal) {
				//重置时开启动画
				if (newVal) {
					this.over();
				}
			},
			//看一下变化了就要去将行清除
			matrix(newVal, oldVal) {
				const clears = isClear(newVal);
				//有要清除的行并且不是在重置的时候
				if (clears && !this.reset) {
					this.clearAnimate(clears);
				}
			},
			cur(newVal, oldVal) {
				// console.log("auto cur", newVal)
				this.matrix2 = this.cloneMatrix(this.getResult());
			},
		},
		methods: {
			cloneMatrix(matrix) {
				matrix = matrix || [];
				return matrix.map((m) => {
					return m.slice();
				})
			},
			clearAnimate(clears) {
				const anima = (callback) => {
					t(() => {
						this.animateColor = 0;
						this.matrix2 = this.cloneMatrix(this.getResult());
						t(() => {
							this.animateColor = 2;
							this.matrix2 = this.cloneMatrix(this.getResult());
							if (typeof callback === 'function') {
								callback();
							}
						}, 100);
					}, 100);
				};
				// return states.clearLines(this.matrix, clears);
				anima(() => {
					anima(() => {
						anima(() => {
							t(() => {
								states.clearLines(this.matrix, clears);
							}, 100);
						});
					});
				});
			},
			//开头的动画
			over() {
				// let overState = this.getResult();
				let overState = this.cloneMatrix(this.getResult());

				const exLine = (index) => {
					if (index <= 19) {
						overState.splice(19 - index, 1, fillLine.slice());
					} else if (index >= 20 && index <= 39) {
						overState.splice(index - 20, 1, blankLine.slice());
					} else {
						// console.log("auto end")
						states.overEnd();
						return;
					}
					this.matrix2 = overState;
				};

				for (let i = 0; i <= 40; i++) {
					t(exLine.bind(null, i), 40 * (i + 1));
				}

				this.matrix2 = overState;
			},
			clearLineColor(clearLines, matrix) {
				const animateColor = this.animateColor;
				clearLines.forEach((index) => {
					let a = [animateColor,
						animateColor,
						animateColor,
						animateColor,
						animateColor,
						animateColor,
						animateColor,
						animateColor,
						animateColor,
						animateColor,
					];
					matrix.splice(index, 1, a);
				});
				return matrix;
			},
			getResult() {
				const cur = this.cur;
				const shape = cur && cur.shape;
				const xy = cur && cur.xy;
				let matrix = this.cloneMatrix(this.matrix);
				const clearLines = isClear(this.matrix);
				if (clearLines) {
					return this.clearLineColor(clearLines, matrix);
				} else if (shape) {
					//开启辅助
					if (this.help) {
						let h = shape.length; //形状的高度
						let x = xy[0]; //位置的纵坐标，在第几行
						let _xy = xy.slice(); //坐标的复制
						for (var i = x + 1; i <= 20 - h; i++) {
							var next_xy = [i, xy[1]]; //下一行的位置
							var empty = true; //看下一行的形状位置是不是空的
							for (let j = h - 1; j >= 0; j--) { //从最形状的下面一行开始
								let line = shape[j];
								line.forEach((v, k) => {
									let a = matrix[next_xy[0] + j];
									if (v == 1 && a[next_xy[1] + k] == 1) {
										empty = false; //不空
									}
								});
							}
							if (!empty) {
								_xy[0] = i - 1; //辅助块的位置
								break;
							}
							_xy[0] = i;
						}
						//如果辅助块的位置和当前块的位置不同
						if (_xy.toString() !== xy.toString()) {
							shape.forEach(function(shape_line, k1) {
								shape_line.forEach(function(v, k2) {
									let line = matrix[_xy[0] + k1]; //屏幕的行
									if (v == 1) {
										line[_xy[1] + k2] = 3; //设置颜色
									}
								});
							});
						}
					}
					shape.forEach(function(shape_line, k1) {
						shape_line.forEach(function(v, k2) {
							if (v && xy[0] + k1 >= 0) {
								let color;
								let line = matrix[xy[0] + k1];
								if (1 !== line[xy[1] + k2] || clearLines) {
									color = 1;
								} else {
									color = 2;
								}
								line[xy[1] + k2] = color;
								matrix[xy[0] + k1] = line;
							}
						});
					});
				}
				return matrix;
			}
		}
	}
</script>

<style scoped lang="less">
	.matrix {
		border: 2px solid #000;
		padding: 3px 1px 1px 3px;
		width: 228px;

		p {
			width: 220px;
			height: 22px;
		}
	}
</style>